<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-20">
			<view class="flex-col section_3 space-y-43">
				<view class="flex-col space-y-42">
					<text class="self-start text_4">选择拒绝原因</text>
					<view class="flex-row justify-between">
						<view class="flex-row space-x-25">
							<image class="shrink-0 image_6"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6529e6d1ce83440011a2ee1e/16972465579447209033.png" />
							<text class="font_2">已经消费结束</text>
						</view>
						<view class="flex-row group_2 space-x-25">
							<view class="shrink-0 section_4"></view>
							<text class="font_2">已经超出截止时间</text>
						</view>
					</view>
					<view class="flex-row space-x-89">
						<view class="flex-row space-x-26">
							<view class="shrink-0 section_4"></view>
							<text class="font_2">已经超出截止时间</text>
						</view>
						<view class="flex-row space-x-26">
							<view class="shrink-0 section_4"></view>
							<text class="font_2">已经消费结束</text>
						</view>
					</view>
				</view>
				<view class="flex-col space-y-41">
					<view class="flex-row justify-between">
						<view class="flex-row space-x-25">
							<view class="shrink-0 section_4"></view>
							<text class="font_2">已经消费结束</text>
						</view>
						<view class="flex-row items-center radio space-x-26">
							<view class="shrink-0 section_4"></view>
							<text class="font_2">已经超出截止时间</text>
						</view>
					</view>
					<view class="flex-row space-x-24">
						<view class="section_4"></view>
						<text class="font_2">其他</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_5">
				<text class="self-start text_5">请输入拒绝理由...</text>
				<view class="flex-col justify-start items-center button text-wrapper"><text class="text_6">提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			overflow-y: auto;

			.section_3 {
				padding: 42rpx 30rpx 45rpx;
				background-color: #ffffff;

				.space-y-42 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 42rpx;
					}

					.text_4 {
						color: #333333;
						font-size: 30rpx;
						font-family: PingFang SC;
						line-height: 28rpx;
					}

					.group_2 {
						margin-right: 34rpx;
					}

					.space-x-89 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 89rpx;
						}
					}
				}

				.space-y-41 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 41rpx;
					}

					.radio {
						margin-right: 33rpx;
					}

					.space-x-24 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 24rpx;
						}
					}
				}

				.space-x-25 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 25rpx;
					}

					.image_6 {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.section_4 {
					border-radius: 16rpx;
					width: 32rpx;
					height: 32rpx;
					border: solid 2rpx #dddddd;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 28rpx;
					color: #333333;
				}

				.space-x-26 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 26rpx;
					}
				}
			}

			.space-y-43 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 43rpx;
				}
			}

			.section_5 {
				padding: 32rpx 30rpx 56rpx;
				background-color: #ffffff;

				.text_5 {
					color: #bdbdbd;
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 26rpx;
				}

				.button {
					margin: 804rpx 30rpx 0;

					.text_6 {
						color: #ffffff;
						font-size: 32rpx;
						font-family: PingFangSC;
						line-height: 31rpx;
					}
				}

				.text-wrapper {
					padding: 34rpx 0;
					background-color: #54bc6e;
					background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
					border-radius: 24rpx;
				}
			}
		}

		.space-y-20 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 20rpx;
			}
		}
	}
</style>